<!--
 * @Author: lihaogn
 * @Date: 2021-11-14 19:53:57
 * @LastEditTime: 2022-07-23 14:14:29
 * @LastEditor: lihaogn
 * @Description: 登录页面
 * @FilePath: \lix-admin-client-vue2\src\views\common\Login.vue
-->

<template>
  <div class="login-page">
    <!-- 登录框 -->
    <el-card class="login-form-box">
      <!-- 标题 -->
      <div
        slot="header"
        class="gl-flex-row"
        style="justify-content: center; height: 20px; line-height: 20px"
      >
        <span style="font-weight:bold;font-size:18px;">登录</span>
      </div>
      <!-- 登录表单 -->
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
        <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-user"
            v-model="loginForm.username"
            placeholder="请输入用户名"
            :autofocus="true"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="请输入密码"
            clearable
            v-on:keyup.enter.native="onSubmit('loginForm')"
          >
            <i
              v-if="passwordType === 'text'"
              slot="suffix"
              class="font_family icon-yincang-hide el-input__icon"
              style="display:inline-block;"
              title="隐藏密码"
              @click="passwordType = 'password'"
            ></i>
            <i
              v-else
              slot="suffix"
              class="el-icon-view el-input__icon"
              title="显示密码"
              @click="passwordType = 'text'"
            >
            </i>
          </el-input>
        </el-form-item>
        <!-- <div style="margin: 10px 0 20px; font-size: 14px; text-align: right">
          <el-link type="danger" :underline="false" href="#/">{{
            忘记密码
          }}</el-link>
        </div> -->
        <el-form-item class="gl-flex-row bottom-btn">
          <el-button
            type="primary"
            :loading="loginBtnLoading"
            @click="onSubmit('loginForm')"
            >登录
          </el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  name: 'login',
  data() {
    return {
      loginBtnLoading: false,
      // 输入框类型
      passwordType: 'password',
      // 登录表单
      loginForm: {
        username: '',
        password: ''
      },
      // 登录表单校验规则
      loginRules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: '用户名长度为3-20个字符',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: '密码长度为3-20个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    ...mapActions({
      login: 'user/login'
    }),
    /**
     *@description: 表单提交事件-登录或注册
     *@params: [formName:指定ref的form名称]
     *@return:
     *@author: lihaogn
     *@date: 2021-05-16 13:55:02
     */
    onSubmit(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          if (formName === 'loginForm') {
            // 登录功能
            this.loginBtnLoading = true
            const { success, message } = await this.login(this.loginForm)

            if (success) {
              // 登录成功跳转页面
              this.$message.success(message)
              this.loginBtnLoading = false
              this.$router.push('/')
            } else {
              this.loginBtnLoading = false
            }
          }
        } else {
          return false
        }
      })
    },
    /**
     *@description: 表单重置事件
     *@params: [formName:指定ref的form名称]
     *@return:
     *@author: lihaogn
     *@date: 2021-05-16 13:56:06
     */
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.login-page {
  position: relative;
  height: 100%;

  .login-form-box {
    width: 480px;
    position: absolute;
    left: 60%;
    top: 30%;

    .bottom-btn {
      justify-content: flex-end;
      margin-bottom: 0;
    }

    /deep/.el-input__icon {
      cursor: pointer;
      &:hover {
        color: #909399;
      }
    }
  }
}
</style>
